import React, { Component } from 'react'
import Header from '../Header';
import Main from '../Main';
import Footer from '../Footer';
import './index.css';
import { nanoid } from 'nanoid'

export default class App extends Component {
    //准备数据
    state = {
        todos: [{
            id: 1, title: '生命不等于是呼吸，生命是活动', done: true,
        },
        {
            id: 2, title: '奢侈是舒适的，否则就不是奢侈', done: false,
        },
        {
            id: 3, title: '懒人无法享受休息之乐', done: false,
        },
        {
            id: 4, title: '内外相应，言行相称', done: false,
        },
        {
            id: 5, title: '合理安排时间，就等于节约时间', done: true,
        },

        ]
    }
    render() {
        let {todos} = this.state;
        return (<div className="todo-container">
            <div className="todo-wrap">
                <Header addTodo={this.addTodo}/>
                <Main todos={todos}  deleteTodo={this.deleteTodo} checkTodo={this.checkTodo}/>
                <Footer todos={todos} clearTodo={this.clearTodo} checkTodoAll={this.checkTodoAll}/>
            </div>
        </div>
        )
    }
    //增加内容功能
    addTodo = (title) => {
        let todo ={
            id:nanoid(),
            title:title,
            done:false,
        }
        //创建一个新数组
        let newTodos = [...this.state.todos,todo];
         //设置
         this.setState({
            todos: newTodos
        })
    }
    //删除内容功能
    deleteTodo = (id) =>{
        let {todos} = this.state;
        let newTodos = todos.filter(item => item.id !== id);
        //设置
        this.setState({
            todos: newTodos
        })
    }
    //切换状态功能
    checkTodo = (id,status) =>{
        let {todos} = this.state;
        let newTodos = todos.map(item => {
            if(item.id === id) item.done = status;
            return item;
        })

        //设置
        this.setState({
            todos: newTodos
        })
    }
    //全部清理功能
    clearTodo = () =>{
        let {todos} = this.state;
        let newTodos = todos.filter(item => !item.done);
         //设置
         this.setState({
            todos: newTodos
        })
    }
    //反选功能
    checkTodoAll = (status) => {
        //遍历
        let newTodos = this.state.todos.map(item => {
            item.done = status;
            return item;
        });
        this.setState({
            todos: newTodos
        })
    }
}
